<template>
  <div>
    <div class="root_div">
      <div class="info_div">
        <Button size="large" type="primary" @click="preImages">
          <Icon type="ios-arrow-back" />
          上一套
        </Button>
        <Button size="large" type="error" @click="deleteImages">
          删除
        </Button>
        <InputNumber v-model="imageId" size="large"></InputNumber>
        <Button size="large" type="primary" @click="getImages">
          {{localImageId}}
        </Button>
        <Button size="large" type="primary" @click="favorite">
          收藏
        </Button>
        <Button size="large" type="primary" @click="nextImages">
          下一套
          <Icon type="ios-arrow-forward" />
        </Button>
        <Button size="large" type="primary" @click="getImageSet">
          请求列表
        </Button>
      </div><br/>
      <div class="div_image">
        <img v-for="image in images" :src="image" class="img"/>
        <p style="color: red; padding-top: 10px; font-size: 20px;">{{msg}}</p>
      </div>
      <br/>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      "msg": "",
      "imageId": 24000,
      "localImageId": 24000,
      "listImageSet": [],
      "images": ["http://localhost:8090/resources/meituri/02/40/24011/31.jpg"]
    };
  },
  mounted () {
    this.start()
  },
  methods: {
    start () {
      this.axios({
        method: 'get',
        url: '/image/start-view'
      }).then((resp) => {
        this.msg = "";

        if(resp.data.status == 200) {
          this.listImageSet = resp.data.data.ids;
          this.images = resp.data.data.images;
          this.imageId = resp.data.data.id;
          this.localImageId = resp.data.data.id;
        }
        else if(resp.data.status == 202) {
          this.images = [];
          this.msg = resp.data.msg;
        }
      }).catch(resp => {
        console.log('请求失败: ' + resp.status + ', ' + resp.statusText)
      })
    },
    preImages () {
      this.imageId = this.listImageSet[this.listImageSet.indexOf(this.localImageId) - 1];
      this.getImages();
    },
    getImages () {
      this.axios({
        method: 'get',
        url: '/image/view?id=' + this.imageId
      }).then((resp) => {
        console.log(resp.data)
        this.msg = "";

        if(resp.data.status == 200) {
          this.images = resp.data.data;
          this.localImageId = this.imageId;
        }
        else if(resp.data.status == 202) {
          this.images = [];
          this.msg = resp.data.msg;
        }

        var idxOfImageId = this.listImageSet.indexOf(this.localImageId);

        if(idxOfImageId < 0 || idxOfImageId >= len(this.listImageSet) - 1) {
          this.getImageSet()
        }
      }).catch(resp => {
        console.log('请求失败: ' + resp.status + ', ' + resp.statusText)
      })
    },
    nextImages () {
      this.imageId = this.listImageSet[this.listImageSet.indexOf(this.localImageId) + 1];
      this.getImages();
    },
    favorite () {
      this.axios({
        method: 'get',
        url: '/image/favorite?id=' + this.localImageId
      }).then((resp) => {
        console.log(resp.data)
      }).catch(resp => {
        console.log('请求失败: ' + resp.status + ', ' + resp.statusText)
      })
    },
    deleteImages () {
      this.axios({
        method: 'get',
        url: '/image/delete?id=' + this.localImageId
      }).then((resp) => {
        console.log(resp.data)
        this.nextImages()
        this.getImageSet();
      }).catch(resp => {
        console.log('请求失败: ' + resp.status + ', ' + resp.statusText)
      })
    },
    getImageSet () {
      this.axios({
        method: 'get',
        url: '/image/list?id=' + this.localImageId
      }).then((resp) => {
        console.log(">>> 请求列表")
        console.log(resp.data)
        this.msg = "";

        if(resp.data.status == 200) {
          this.listImageSet = resp.data.data;
        }
        else if(resp.data.status == 202) {
          this.images = [];
          this.msg = resp.data.msg;
        }

      }).catch(resp => {
        console.log('请求失败: ' + resp.status + ', ' + resp.statusText)
      })
    },
    getUsefulId () {
      for(var idx = 0; idx < this.listImageSet.length; idx++) {
        if(this.listImageSet[idx] > this.localImageId) {
          return this.listImageSet[idx];
        }
      }
    }
  }
}
</script>
<style scoped>
.root_div {
  text-align: center;
}
.info_div {
  width: 100%;
  background-color: white;
  text-align: center;
  display: block;
  padding: 10px 0;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.div_image {
  padding-top: 50px;
  text-align: center;
  display: block;
  width: 100%;
}
.img {
  max-width: 300px;
  vertical-align: top;
  padding: 2px;
}
</style>
